<template>
  <div class="article-container" style="background-color:#fff">
    <van-nav-bar class="page-nav-bar" title="黑马头条" fixed left-arrow @click-left="onClickLeft" />
    <div class="content-container">
      <!-- 加载中 -->
      <div class="lodaing" v-if="lodaing">
        <van-loading color="#1989fa">加载中</van-loading>
      </div>
      <!-- 加载完成 -->
      <div class="zhengwen markdown-body" v-else-if="articleData.title">
        <h5>{{articleData.title}}</h5>
        <div class="userinfo">
          <div class="left">
            <img
              :src="articleData.aut_photo"
              alt
              style="width:50px;height:50px;border-radius: 50%;"
            />
            <span class="info">
              <span class="name">{{articleData.aut_name}}</span>
              <span class="time">{{articleData.pubdate | format}}</span>
            </span>
          </div>
          <!-- 是否关注 -->
          <!-- <followed-user
            :is_followed="articleData.is_followed"
            :aut_id="articleData.aut_id"
            @ff="articleData.is_followed=$event"
          ></followed-user>-->
          <followed-user v-model="articleData.is_followed" :aut_id="articleData.aut_id"></followed-user>
          <!-- <div class="right">
            <van-button
              round
              type="info"
              :loading="btnlodaing"
              v-if="articleData.is_followed"
              @click="isfollow"
            >
              <span class="icon">+</span> 关注
            </van-button>
            <van-button round type="default" :loading="btnlodaing" v-else @click="isfollow">
              <span style="color:#000">已关注</span>
            </van-button>
          </div>-->
          <!-- 是否关注 -->
        </div>
        <div class="content" v-html="articleData.content" style="font-size:17px">
          <img src="../../assets/banner.png" alt style="width:60px;height:60px;" />
        </div>
      </div>
      <!-- 加载失败 404 -->
      <p
        style="font-size:16px;color:#ccc;margin:50px 0"
      >---------------------正文结束---------------------</p>
      <!-- 所有评论 -->
      <all-recomments
        :artId="artId"
        @total="getTotal"
        :allRecomments="allRecomments"
        :attitude="articleData.attitude"
        @comment-reply="replyData"
      ></all-recomments>
      <!-- 所有评论 -->
    </div>
    <van-tabbar v-model="active" fixed>
      <van-tabbar-item @click="showPopup">
        <van-button round type="info" color="#fff" id="comments">写评论</van-button>
      </van-tabbar-item>
      <!-- 点击评论显示弹出层 -->
      <recomments :show="show" :artId="artId" @rec="recommentuser" :target="artId" :total="total"></recomments>
      <!-- 点击评论显示弹出层 -->
      <van-tabbar-item icon="comment-o" :badge="total"></van-tabbar-item>
      <!-- 收藏 -->
      <collected
        :is_collected="articleData.is_collected"
        :artId="artId"
        @cc="articleData.is_collected=$event"
      ></collected>
      <!-- 收藏 -->
      <!-- 点赞 -->
      <liking :artId="artId" :attitude="articleData.attitude" @aa="articleData.attitude=$event"></liking>
      <!-- 点赞 -->
      <van-tabbar-item icon="share"></van-tabbar-item>
    </van-tabbar>
    <!-- 点击回复显示弹出层 -->
    <van-popup
      v-model="show2"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <reply v-if="show2" :item="item" :artId="artId"></reply>
    </van-popup>
    <!-- 点击回复显示弹出层 -->
  </div>
</template>
<script>
import followedUser from "./components/followed.vue";
import collected from "./components/collected.vue";
import liking from "./components/liking.vue";
import recomments from "./components/recomments.vue";
import allRecomments from "./components/allRecomments";
import {
  getArticle_api,
  collectedart_api,
  nocollectedart_api,
  addRecomments_api,
} from "@/api/user.js";
import reply from "./components/reply";
export default {
  props: ["artId"],
  data() {
    return {
      message: "",
      active: "",
      articleData: "", // 文章数据
      lodaing: false,
      show: false,
      show2: false,
      // recommentData: "", // 评论数据
      allRecomments: [], // 所有评论
      total: 0, // 评论总条数
      item: "",
    };
  },
  created() {
    this.getArticle();
  },
  methods: {
    // 获取新闻详情
    async getArticle() {
      // 已发送请求就开始加载
      this.lodaing = true;
      try {
        const { data: res } = await getArticle_api(this.artId);
        // console.log(res);
        this.articleData = res.data;
        // 数据加载完后加载完成
        this.lodaing = false;
      } catch (error) {
        if (error.response.status === 404) {
        }
      }
    },
    // 返回
    onClickLeft() {
      // this.$toast("返回");
      this.$router.go(-1);
    },
    // 点击评论显示弹出层
    showPopup() {
      this.show = true;
    },
    // 获取用户评论的信息
    recommentuser(data) {
      this.show = false;
      this.allRecomments.unshift(data);
      // console.log(this.allRecomments);
    },
    // 接收子组件传过来的评论总条数
    getTotal(num) {
      this.total = num;
    },
    // 获取回复的数据  当前点击的那一条评论
    replyData(item) {
      console.log(item);
      this.show2 = true;
      this.item = item;
    },
  },
  watch: {},
  computed: {},
  components: {
    followedUser,
    collected,
    liking,
    allRecomments,
    recomments,
    reply,
  },
};
</script>
<style lang='less' scoped>
@import "./github-markdown.css";
/deep/.van-nav-bar__arrow {
  color: #fff;
}
.van-button__text {
  color: #ccc;
}
.van-tabbar-item:first-child {
  /deep/ .van-tabbar-item__text {
    width: 300px;
    height: 40px;
    margin-left: 30px;
    margin-right: 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    .van-button--round {
      width: 100%;
      height: 40px;
      line-height: 40px;
    }
  }
}
.content-container {
  padding: 90px 30px 0;
  h5 {
    margin-top: 20px;
    padding: 20px 0;
  }
  .userinfo {
    height: 120px;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .left {
      // width: 300px;
      display: flex;
      img {
        vertical-align: middle;
        margin-right: 20px;
      }
      .info {
        font-size: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 20px 0;
      }
    }
    .right {
      .van-button {
        width: 200px;
        height: 60px;
        .van-button__text {
          color: #fff;
          .icon {
            font-size: 40px;
          }
        }
      }
    }
  }
  .authorinfo {
    height: 120px;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    .left {
      // width: 300px;
      display: flex;
      img {
        vertical-align: middle;
        margin-right: 20px;
      }
      .name {
        // display: inline-block;
        // height: 50px;
        color: #6bb4eb;
      }
      .info {
        font-size: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }
    .van-button {
      margin-left: 20px;
      width: 150px;
      height: 50px;
      .van-button__text {
        font-size: 12px;
        color: #000;
      }
    }
  }
}
.van-popup {
  display: flex;
  .van-field {
    flex: 1;
    height: 300px;
  }
  /deep/.van-field__word-limit {
    margin-top: 100px;
  }
  .public {
    width: 150px;
    height: 300px;
    font-size: 35px;
    color: #bfd7ee;
    text-align: center;
    line-height: 300px;
  }
}
.van-field {
  //   background-color: #f5f7f9;
  /deep/.van-field__value {
    background-color: #f5f7f9;
    padding: 20px;
  }
}
</style>